<template>
  <div class="page-container">
    <!-- 查询表单 -->
    <el-form :model="searchParams" inline class="search-form" size="medium">
      <el-form-item label="一体杆名称:">
        <el-input v-model="searchParams.poleName" placeholder="请输入一体杆名称" />
      </el-form-item>
      <el-form-item label="一体杆编号:">
        <el-input v-model="searchParams.poleNumber" placeholder="请输入一体杆编号" />
      </el-form-item>
      <el-form-item label="运行状态:">
        <el-select v-model="searchParams.poleStatus" clearable placeholder="请选择运行状态">
          <el-option label="正常" value="0" />
          <el-option label="异常" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getRodList()">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 操作按钮 -->
    <div class="operation-btn">
      <el-button v-auth-btn="'pole:info:add_edit'" type="primary" size="medium" @click="onOpenRodEditor({})">添加一体杆</el-button>
      <el-button v-auth-btn="'pole:info:remove'" type="primary" size="medium" @click="onDeleteRod('')">批量删除</el-button>
    </div>
    <!-- 一体杆信息表格 -->
    <el-table :data="rodList" :header-cell-style="{ background: '#f7f8f9' }" @selection-change="onSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column label="序号" type="index" width="80" />
      <el-table-column prop="poleName" label="一体杆名称" />
      <el-table-column prop="poleNumber" label="一体杆编号" />
      <el-table-column prop="poleIp" label="一体杆IP" />
      <el-table-column prop="areaName" label="安装区域" />
      <el-table-column label="一体杆类型">
        <template #default="{ row }">
          {{ poleTypeEnum[row.poleType] }}
        </template>
      </el-table-column>
      <el-table-column label="运行状态">
        <template #default="{ row }">
          {{ row.poleStatus === 0 ? '正常' : '异常' }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button v-auth-btn="'pole:info:add_edit'" type="text" @click="onOpenRodEditor(row)">编辑</el-button>
          <el-button v-auth-btn="'pole:info:remove'" type="text" @click="onDeleteRod(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      :current-page.sync="searchParams.page"
      layout="->, total, prev, pager, next"
      :total="rodTotal"
      @current-change="getRodList"
    />
    <!-- 一体杆编辑器 -->
    <RodEditor ref="rodEditorRef" @update-list="getRodList" />
  </div>
</template>

<script>
import { getRodListAPI, deleteRodAPI } from '@/api/rod/manage'

import RodEditor from './components/RodEditor'

export default {
  name: 'RodWarning',
  components: { RodEditor },
  data() {
    return {
      // 查询表单数据
      searchParams: {
        page: 1, // 当前页码
        pageSize: 10, // 每页显示的条数
        poleName: '', // 一体杆名称
        poleNumber: '', // 一体杆编号
        poleStatus: '' // 运行状态
      },
      // 一体杆信息列表
      rodList: [],
      // 一体杆信息列表数据总条数
      rodTotal: 0,
      // 一体杆类型枚举
      poleTypeEnum: {
        entrance: '入口',
        export: '出口',
        center: '中心'
      },
      // 被选中的行数据
      selectedRows: []
    }
  },
  created() {
    // 获取一体杆信息列表
    this.getRodList()
  },
  methods: {
    // 获取一体杆信息列表
    async getRodList() {
      const res = await getRodListAPI(this.searchParams)
      this.rodList = res.rows
      this.rodTotal = res.total
    },
    // 按条件搜索一体杆信息列表
    searchCarcardList() {
      // 重置页码
      this.searchParams.page = 1
      this.getRodList()
    },
    // 打开一体杆信息编辑器
    onOpenRodEditor(row) {
      this.$refs.rodEditorRef.open(row)
    },
    // 删除一体杆
    onDeleteRod(id) {
      this.$confirm('您确定要删除吗?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        let ids = ''
        if (id) {
          ids = '' + id
        } else {
          ids = this.selectedRows.map(item => item.id).join(',')
        }
        await deleteRodAPI(ids)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        // 刷新表格
        this.getRodList()
      })
    },
    // 表格中被选择的选项发生变化时
    onSelectionChange(selection) {
      this.selectedRows = selection
    }
  }
}
</script>

<style lang="scss" scoped>
.page-container {
  .search-form {
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    .el-form-item {
      margin-right: 20px;
    }
  }
  .operation-btn {
    margin-bottom: 20px;
  }
  ::v-deep .el-table {
    margin-bottom: 20px;
    .el-table__cell {
      padding: 5px 0;
    }
  }
}
</style>
